<template>
    <div v-show="app.isHandler == 1" class="handler side-card">
        <div class="close" @click="app.isHandler = 0">
            <svg-icon icon-class="close" size="0.5rem" color="var(--text-color)"></svg-icon>
        </div>
        <div v-show="num == '视频'" class="volume">
            <input class="v-input" type="range" min="0" max="1" step="0.01" v-model="app.volume"
                   @input="app.volume = $event.target.value">
            <svg-icon v-if="app.volume != 0" icon-class="volume" size="0.5rem" color="var(--text-color)"
                      @click="app.volume = 0"></svg-icon>
            <svg-icon v-else icon-class="volume-no" size="0.5rem" color="var(-text-color)"
                      @click="app.volume = 0.6"></svg-icon>
        </div>
        <div class="search">
            <input type="text" class="form" placeholder="输入记录主题或者用户名进行搜索" v-model="searchText">
            <div class="btn-icon">
                <svg-icon icon-class="search" size="0.5rem" color="var(--text-color)"
                    @click="emit('search', searchText);"></svg-icon>
            </div>
        </div>
        <div class="navbar">
            <div v-show="width < 900" class="icon left">
                <n-popover trigger="hover" placement="bottom">
                    <template #trigger>
                        <svg-icon icon-class="left" size="0.5rem" color="var(--text-color)"
                                  @click="prevMonth"></svg-icon>
                    </template>
                    <span>上一页</span>
                </n-popover>
            </div>
            <div class="page" :class="{sub: width < 900}">
                <div class="item" v-for="item in slidingWindow" :class="{active: item == num}"
                     @click="switchNavBer(item)">{{ item }}
                </div>
            </div>
            <div v-show="width < 900" class="icon right">
                <n-popover trigger="hover" placement="bottom">
                    <template #trigger>
                        <svg-icon icon-class="right" size="0.5rem" color="var(--text-color)"
                                  @click="nextMonth"></svg-icon>
                    </template>
                    <span>下一页</span>
                </n-popover>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store";
import {useWindowSize} from "@vueuse/core";

const {app} = useStore();
const {width, height} = useWindowSize();

const navbarList1 = ['全部', '推荐', '视频', '图片', '约会', '活动', '赛事', '帮忙'];
const navbarList2 = ['帮忙', '赛事', '活动', '约会', '图片', '视频', '推荐', '全部'];

const emit = defineEmits(['switch', 'search']);

const slidingWindow = ref(navbarList1);
const num = ref('全部');
const searchText = ref('');

const prevMonth = () => {
    slidingWindow.value = navbarList1;
};
const nextMonth = () => {
    slidingWindow.value = navbarList2;
};

const switchNavBer = (name: string) => {
    num.value = name;
    emit('switch', name);
}

const submit = (text: string) => {
    emit('search', text);
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin";

.handler {
  position: sticky;
  top: 0.1rem;
  width: 100%;
  height: 2rem;
  margin: 0 auto;
  padding-top: 0.1rem;
  z-index: 101;
  background: var(--main-2-ha3);
  overflow: hidden;

  .close {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 11;
    cursor: pointer;
    width: 0.8rem;
    height: 0.6rem;
    background: var(--main-1);
    border-radius: 0.3rem 0 0 0;
    transition: 0.4s;
    padding: 0.05rem 0 0.05rem 0.13rem;
    box-shadow: 0 0 0.04rem 0.02rem var(--box-shadow);

    &:hover {
      background: var(--main-1-h2);
      width: 1.6rem;
    }

    &:hover:after {
      content: "关闭";
      color: var(--text-color);
      font-size: 0.3rem;
      position: relative;
      top: -0.1rem;
      left: 0.1rem;
    }
  }

  .volume {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 11;
    width: 3.4rem;
    height: 0.6rem;
    background: var(--main-1);
    border-radius: 0 0.3rem 0 0;
    transition: 0.4s;
    padding: 0.05rem 0 0.05rem 0.15rem;
    box-shadow: 0 0 0.04rem 0.02rem var(--box-shadow);
    transform: translateX(-2.6rem);

    .v-input {
      position: relative;
      top: -0.07rem;
      left: 0.05rem;
      margin-right: 0.2rem;
      accent-color: var(--main-1);
    }

    &:hover {
      background: var(--main-1-h2);
      transform: none;
    }
  }

  .search {
    @include flex;
    height: 0.8rem;
    max-width: 50%;
    min-width: 5rem;
    margin: 0.1rem auto;
    padding-left: 0.02rem;
    border-radius: 0.15rem;
    background: var(--main-1);
    overflow: hidden;

    input::-webkit-input-placeholder {
      color: var(--main-2);
    }

    .form {
      width: calc(100% - 1rem);
      border-radius: 0.15rem;
      line-height: 0.5rem;
      font-size: 0.4rem;
      padding: 0.13rem 0.3rem;
      color: var(--text-color);
      overflow-wrap: break-word;
      word-wrap: break-word;
      flex-grow: 1;
      resize: none;
      border: none;

      &:focus {
        outline: none;
        box-shadow: inset 0 0 0.05rem 0.02rem var(--box-shadow);
      }

      &::selection {
        background-color: var(--main-2);
        color: var(--main-1);
      }
    }

    .btn-icon {
      @include flex;
      width: 1rem;
      height: 100%;
      border-radius: 0.15rem;
      box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow);
      background: var(--main-2);
      animation: titleScale 2s infinite alternate;

      &:hover {
        transition: 0.3s;
        background: var(--header-bg-color);
        box-shadow: inset 0 0 0.06rem 0.03rem var(--box-shadow);
      }
    }
  }

  .navbar {
    position: relative;
    width: 100%;
    height: 0.8rem;
    margin: 0 auto;

    .icon {
      @include flex;
      position: absolute;
      top: 0;
      width: 0.7rem;
      height: 0.7rem;

      &:hover {
        background: var(--main-2-hs1);
        border-radius: 50%;
      }
    }

    .left {
      left: 0.5rem;
    }

    .right {
      right: 0.5rem;
    }

    .page {
      @include flex;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;
      gap: 0.2rem;
      flex-wrap: wrap;

      .item {
        @include flex;
        width: 1.4rem;
        height: 0.7rem;
        text-align: center;
        padding: 0.1rem;
        font-size: 0.35rem;
        border-radius: 0.2rem;
        color: var(--main-2-h8);

        &:hover {
          background: var(--main-2-hs1);
        }
      }

      .item.active {
        background: var(--main-1);
        color: var(--main-1-h10);
      }
    }

    .page.sub {
      width: 80%;
    }
  }
}

@media (max-width: 42rem) {
  .handler {
    z-index: 102;
  }
  .form {
    font-size: 0.3rem !important;
  }
}
</style>